<template>
	<screen-page title="项目装配信息">
		<div class="page-screen6-container">
			<!-- ********** -->
			<div class="ver-flex-containter">
				<div class="special-blcok special-blcok-size-a">
					<module1 :data-source="data1" />
				</div>
				<div class="ver-flex-block hor-flex-containter">
					<div class="divider"></div>
					<div class="special-blcok special-blcok-size-b">
						<module2 ref="module2" :data-source="data2" :active-index="active2" />
					</div>
					<div class="divider"></div>
					<div class="flex-block">
						<screen-block :title="'叫料任务{'+count+'}'">
							<module3 :data-source="data3" v-if="loaded3" />
						</screen-block>
					</div>
					<div class="divider"></div>
				</div>
			</div>
			<!-- ********** -->
		</div>
	</screen-page>
</template>

<script setup>
import { ref, getCurrentInstance, inject, onMounted, onBeforeUnmount } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import Module1 from './modules/Screen6Module1.vue'
import Module2 from './modules/Screen6Module2.vue'
import Module3 from './modules/Screen6Module3.vue'
import { $loading } from '@/assets/js/utils'
import dayjs from 'dayjs'

const instance = getCurrentInstance()
const $config = inject('$config')
const $api = inject('$api')

let interval1 = null;
let interval2 = null;
let interval3 = null;

const count = ref(0)
const data1 = ref({})
const data2 = ref([])
const data3 = ref([])
const active2 = ref(0)
const total2 = ref(0)
const loaded3 = ref(false)

const parseDate = function(date) {
	try{
		const myDate = dayjs(date)
		return myDate.format('YYYY年M月D日')
	}catch(e){
		return 'Invalid Date'
		//TODO handle the exception
	}
}

const getData = function(){
	$loading.show()
	getData1((f)=>{
		if (f) {
			getData2(()=>{
				$loading.hide()
			})
		} else {
			$loading.hide()
		}
	})
}

const getData1 = function(callback){
	$api.get('FabricateNum',{},{block:'screen6'}).then((d)=>{
		data1.value = d || {}
		callback && callback(true)
	}).catch(()=>{
		callback && callback(false)
	})
}

const getData2 = function(callback){
	$api.get('WarehouseIntel',{},{block:'screen6'}).then((d)=>{
		data2.value = (d || []).map((item)=>{
			item.dateStr = parseDate(item.deliverTime)
			item.rate = item.stateValue?(item.stateValue+'%'):'0%'
			return item
		})
		active2.value = 0
		total2.value = data2.value.length
		instance.refs.module2.drawAnimate()
		dealData3(callback)
	}).catch(()=>{
		callback && callback(false)
	})
}

const dealData3 = function(callback){
	destoryIntervel3()
	if (data2.value.length>0) {
		getData3(callback)
		createInterval3()
	} else {
		data3.value = []
		count.value = 0
		loaded3.value = false
		callback && callback(true)
	}
}

const interval3Fun = function(){
	if (active2.value>=total2.value-1) {
		active2.value = 0
	} else {
		active2.value++
	}
	getData3()
}

const getData3 = function(callback){
	let params = {WarehouseId:data2.value[active2.value].warehouseId}
	loaded3.value = false
	$api.get('WarehouseTask',params,{block:'screen6'}).then((d)=>{
		count.value = d.taskNumber || 0
		data3.value = d.warehouseTask || []
		loaded3.value = true
		callback && callback(true)
	}).catch(()=>{
		loaded3.value = true
		callback && callback(false)
	})
}

const destoryIntervel1 = function(){
	try{
		window.clearInterval(interval1)
		interval1 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel2 = function(){
	try{
		window.clearInterval(interval2)
		interval2 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel3 = function(){
	try{
		window.clearInterval(interval3)
		interval3 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel = function(){
	destoryIntervel1()
	destoryIntervel2()
	destoryIntervel3()
}

const createInterval = function(){
	interval1 = window.setInterval(getData1,$config.base.screen.screen6.intervalTime1)
	interval2 = window.setInterval(getData2,$config.base.screen.screen6.intervalTime2)
}

const createInterval3 = function(){
	interval3 = window.setInterval(interval3Fun,$config.base.screen.screen6.intervalTime3)
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style scoped lang="scss">
.page-screen6-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.special-blcok{
		flex-shrink: 0;
	}
	.special-blcok-size-a{
		height: 18%;
	}
	.special-blcok-size-b{
		width:5em;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.divider{
		width: .14em;
		flex-shrink: 0;
	}
	.ver-divider{
		height: .14em;
		flex-shrink: 0;
	}
}
</style>